<template>
  <div class="">
    <!-- 面包屑 -->
    <crumbs attribute1="数据统计" attribute2="数据报表"></crumbs>
    <!-- 卡片 -->
    <el-card class="mt16">
      <div style="width: 100%; height: 400px" ref="myChart"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      myChart: null,
      predata: {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
      },
    };
  },
  mounted() {
    this.report();
    let _this = this;
    window.addEventListener(
      "resize",
      function () {
        _this.myChart.resize();
      },
      false
    );
  },
  methods: {
    async report() {
      let dv = this.$refs.myChart;
      this.myChart = echarts.init(dv);
      const res = await this.$API.reportsApi();
      console.log(res);
      res.series.forEach((item) => {
        (item.smooth = true),
          (item.lineStyle = { width: 0 }),
          (item.showSymbol = false),
          (item.areaStyle = {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 191, 0)",
              },
              {
                offset: 1,
                color: "rgba(224, 62, 76)",
              },
            ]),
          });
      });
      let mergeData = { ...this.predata, ...res };
      const config = mergeData;
      this.myChart.setOption(config);
    },
  },
  components: {},
};
</script>

<style lang='scss'>
</style>
